<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../include/tag.jsp" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>${empty funnel.id ? '新增' : '编辑'}漏斗分析</title>
    <%@include file="../include/commonFile.jsp" %>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <style type="text/css">
        .icon-delete:hover {
            color: #e8473f;
        }
    </style>
</head>
<body>
<!--头部-->
<%@include file="../include/header.jsp" %>
<div class="index-outside">
    <%@include file="../include/sidebar.jsp" %>
    <!--内容-->
    <section>
        <div class="section-main">
            <!-- 正文请写在这里 -->
            <div class="add-form-content">
                <form id="myForm" class="layui-form mt20" method="post" action="${ctx}/analysis/funnel/save.do">
                    <div class="layui-form-item">
                        <label class="layui-form-label">名称<span class="f-verify-red">*</span></label>
                        <div class="layui-inline">
                            <input type="text" name="name" lay-verify="name" autocomplete="off" placeholder="漏斗名称"
                                   class="layui-input" value="${funnel.name}"/>
                            <input type="hidden" name="id" value="${funnel.id}"/>
                        </div>
                    </div>
                    <div class="flow-list">
                        <c:forEach var="flow" items="${funnelFlows}" varStatus="st">
                            <input type="hidden" value=“"${st.count}" name="flowStep"/>
                            <div class="layui-form-item flow-item">
                                <label class="layui-form-label">
                                    <c:choose>
                                        <c:when test="${st.count == 1}">第<span class="step-name">一</span>步</c:when>
                                        <c:when test="${st.count == 2}">第<span class="step-name">二</span>步</c:when>
                                        <c:when test="${st.count == 3}">第<span class="step-name">三</span>步</c:when>
                                        <c:when test="${st.count == 4}">第<span class="step-name">四</span>步</c:when>
                                        <c:when test="${st.count == 5}">第<span class="step-name">五</span>步</c:when>
                                    </c:choose>
                                </label>
                                <div class="layui-inline">
                                    <input type="text" name="flowName" lay-verify="flowName" autocomplete="off"
                                           placeholder="请填写步骤名称" class="layui-input" value="${flow.name}">
                                </div>
                                <div class="layui-inline">
                                    <select name="eventId" lay-verify="stepEventId">
                                        <option value="">请选择事件</option>
                                            <%--<option value="1">1</option>--%>
                                            <%--<option value="2">2</option>--%>
                                            <%--<option value="3">3</option>--%>
                                        <c:forEach var="event" items="${events}">
                                            <option value="${event.id}" ${flow.eventId == event.id ? 'selected' : ''}>${event.name}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                                <div class="layui-inline">
                                    <div><a href="javascript:void(0);" class="deleteStep"><i
                                            class="iconfont icon-delete btn-icon"></i></a></div>
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-block">
                            <a id="addStep" href="javascript:void(0)" class="red" style="margin-right: 5px">添加一步</a>
                            <a id="resetStep" href="javascript:void(0)" class="red">重置</a>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <a href="javascript:void(0)" class="layui-btn layui-btn-danger" lay-submit lay-filter="*">立即提交</a>
                            <a href="${ctx}/analysis/funnel/list.do" class="layui-btn layui-btn-primary">取消</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!--底部-->
        <%@include file="../include/footer.jsp" %>
    </section>
</div>
<script type="text/html" id="step_template">
    <div class="layui-form-item flow-item">
        <label class="layui-form-label">第<span class="step-name">{{=d.step}}</span>步</label>
        <div class="layui-inline">
            <input type="text" name="flowName" lay-verify="flowName" autocomplete="off" placeholder="请填写步骤名称"
                   class="layui-input">
        </div>
        <div class="layui-inline">
            <select name="eventId" lay-verify="stepEventId">
                <option value="">请选择事件</option>
                <c:forEach var="event" items="${events}">
                    <option value="${event.id}" ${flow.eventId == event.id ? 'selected' : ''}>${event.name}</option>
                </c:forEach>
            </select>
        </div>
        <div class="layui-inline">
            <div><a href="javascript:void(0);" class="deleteStep"><i class="iconfont icon-delete btn-icon"></i></a>
            </div>
        </div>
    </div>
</script>
<script>


    $(function () {
        layui.use(['form', 'laytpl'], function () {
            var form = layui.form, laytpl = layui.laytpl;

            //自定义验证规则
            form.verify({
                name: function (value) {
                    if (!util.isValid(value)) {
                        return "请填写转化模型名称";
                    }
                },
                stepEventId: function (value) {
                    if (!util.isValid(value)) {
                        return "请选择事件";
                    }
                },
                flowName: function (value) {
                    if (!util.isValid(value)) {
                        return "请填写步骤名称";
                    }
                }
            });

            //监听提交
            form.on('submit', function (data) {
                var length = $(".flow-list").find(".flow-item").length;
                if (length > 5) {
                    util.layerMsgError("最多5个步骤");
                    return false;
                } else if (length < 3) {
                    util.layerMsgError("至少3个步骤");
                    return false;
                }

                function checkFlowName() {
                    var repeat = true;
                    var flowNameArray = [];
                    $("[name=flowName]").each(function (index, ele) {
                        var vv = $(ele).val();
                        for (var i = 0; i < flowNameArray.length; i++) {
                            if (flowNameArray[i] == vv) {
                                repeat = false;
                                return false;
                            }
                        }
                        flowNameArray.push(vv);
                    });
                    if (!repeat) {
                        util.layerMsgError("步骤名称重复");
                    }
                }

                checkFlowName();

                function checkEventId() {
                    var repeat = true;
                    var eventIdArray = [];
                    $("[name=eventId]").each(function (index, ele) {
                        var vv = $(ele).find("option:selected").val();
                        for (var i = 0; i < eventIdArray.length; i++) {
                            if (eventIdArray[i] == vv) {
                                repeat = false;
                                return false;
                            }
                        }
                        eventIdArray.push(vv);
                    });
                    if (!repeat) {
                        util.layerMsgError("事件重复");
                    }
                }

                checkEventId();

                txz.submitObject(data.elem, function (callBack) {
                    var items = [];
                    $(".flow-item").each(function (index, ele) {
                        items.push({
                            flowName: $(ele).find("[name=flowName]").val() || '',
                            eventId : $(ele).find("[name=eventId]").find("option:selected").val() || '',
                            step: index + 1
                        });
                    });
                    var submitResult = {
                        id: $("[name=id]").val() || '',
                        name: $("[name=name]").val() || '',
                        flowString: JSON.stringify(items)
                    };
                    var action = $("#myForm").attr("action");
                    $.post(action, submitResult, function (res) {
                        typeof callBack === 'function' && callBack();
                        if (res.success) {
                            util.layerMsgSuccess("提交成功", function () {
                                location.href = "${ctx}/analysis/funnel/list.do";
                            });
                        } else {
                            util.layerMsgError("提交失败")
                        }
                    });
                });
                return false;
            });

            // 增加步骤
            $("#addStep").click(function () {
                var length = $(".flow-list").find(".flow-item").length;
                var step = getStepName(length);
                var getTpl = $("#step_template").html();
                laytpl(getTpl).render({step: step}, function (html) {
                    $(".flow-list").append(html);
                });
                form.render('select');

                length = $(".flow-list").find(".flow-item").length;
                if (length == 5) {
                    $(this).hide();
                }
            });

            // 重置步骤
            $("#resetStep").click(function () {
                $(".flow-list").html("");

                for (var i = 0; i < 3; i++) {
                    var step = getStepName(i);
                    var getTpl = $("#step_template").html();
                    laytpl(getTpl).render({step: step}, function (html) {
                        $(".flow-list").append(html);
                    });
                }
                form.render('select');

                $("#addStep").show();
            });

            $(".flow-list").delegate(".deleteStep", "click", function (e) {
                var that = $(e.target);
                $(that).closest(".flow-item").remove();

                $(".flow-item").each(function (index, ele) {
                    var stepName = getStepName(index);
                    $(ele).find(".step-name").text(stepName);
                });

                $("#addStep").show();
            })

            function getStepName(step) {
                var stepName = '';
                switch (step) {
                    case 0:
                        stepName = "一";
                        break;
                    case 1:
                        stepName = "二";
                        break;
                    case 2:
                        stepName = "三";
                        break;
                    case 3:
                        stepName = "四";
                        break;
                    case 4:
                        stepName = "五";
                        break;
                    default:
                        break;
                }
                return stepName;
            }
        });
    })
</script>
<script type="text/javascript">
    txz.initHeader({
        nav: [{
            name: '漏斗分析'
        }, {
            name: '${empty funnel.id ? '增加' : '编辑'}漏斗分析',
            curr: true
        }],
        btns: [{
            name: '返回',
            href: 'javascript:history.back();',
            icon: 'back'
        }]
    });
</script>
</body>
</html>